<style rel="stylesheet/scss" lang="scss" scoped>
.mid {
  line-height: 140px;
}
</style>
<template>
  <div class="app-container calendar-list-container" v-loading="isLoading">
    <div>
      <el-select placeholder="客户" v-model="customerId" clearable class="mr-30">
        <el-option
          v-for="(item , index) in clientList"
          :key="index"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>报价日期:
      <el-date-picker
        is-range
        v-model="timeArr"
        type="daterange"
        range-separator="至"
        value-format="yyyy-MM-dd"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 400px;"
      ></el-date-picker>
      <div class="fr">
        <el-input style="width: 200px;" class="filter-item" v-model="quoteNo" placeholder="请输入报价单号"></el-input>
        <el-button class="filter-item" type="primary" icon="search" @click="search" size="small">查询</el-button>
        <el-button
          class="filter-item"
          type="success"
          icon="search"
          @click="$router.push({path:'price/add'})"
          size="small"
        >新增报价单</el-button>
      </div>
    </div>

    <el-table :data="tableData" border style="width: 100%" class="mt-20">
      <el-table-column align="center" label="序号">
        <template slot-scope="scope">{{(pageData.page - 1) * pageData.size + (scope.$index+1) }}</template>
      </el-table-column>
      <el-table-column align="center" prop="customerCode" label="客户代码"></el-table-column>
      <el-table-column align="center" prop="customerName" label="客户名称"></el-table-column>
      <el-table-column align="center" prop="quoteNo" label="报价单编号"></el-table-column>
      <el-table-column align="center" prop="quoteTime" label="报价日期"></el-table-column>
      <el-table-column align="center" prop="quoteTypeDv" label="报价类型"></el-table-column>

      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <div v-if="scope.row.status === 0">草稿</div>
          <div v-if="scope.row.status === 1">研发配置</div>
          <div v-if="scope.row.status === 2">采购估价</div>
          <div v-if="scope.row.status === 3">报价调整</div>
          <div v-if="scope.row.status === 4">报价审核</div>
          <div v-if="scope.row.status === 5">发布</div>
          <div v-if="scope.row.status === 6">驳回</div>
          <div v-if="scope.row.status === 7">已删除</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="300px">
        <template slot-scope="scope">
          <el-button-group>
            <el-button
              size="small"
              @click="$router.push({path:'price/detail',query:{quoteId:scope.row.id}})"
              type="success"
            >查看</el-button>
            <el-button
              size="small"
              type="primary"
              v-if="scope.row.status === 0 || scope.row.status === 3 || scope.row.status === 6"
              @click="$router.push({path:'price/edit',query:{quoteId:scope.row.id,quoteType:scope.row.quoteType}})"
            >编辑</el-button>
            <el-button
              size="small"
              v-if="scope.row.status === 5"
              @click="exportExcel(scope.row.id)"
              type="warning"
            >导出</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="getList()"
      :current-page.sync="pageData.page"
      :page-sizes="[2,5,10,20]"
      :page-size="pageData.size"
      :total="pageData.total"
      layout="total, sizes, prev, pager, next, jumper"
      class="pds-pagination"
    ></el-pagination>
  </div>
</template>
<script>
import * as api from "@/api/sale/price/index";
import { mapGetters } from "vuex";

export default {
  components: {
    // 'depart-selector': () =>
    //   import ('./components/departSelector')
  },
  data() {
    return {
      tableData: [],
      pageData: {
        page: 1,
        size: 10,
        total: 1
      },
      centerDialogVisible: false,
      quoteNo: "",
      customerId: "",
      isLoading: false,
      clientList: [],
      timeArr: [],
      quoteTime1: "",
      quoteTime2: ""
    };
  },
  created() {
    this.getClientList();
    //this.getList();
  },
  activated() {
    this.getList();
  },
  computed: {
    ...mapGetters(["elements", "language"])
  },
  methods: {
    // 获取数据列表
    getList() {
      if (this.isLoading) return;
      this.isLoading = true;
      this.listParams = {
        page: this.pageData.page,
        size: this.pageData.size,
        customerId: this.customerId,
        quoteNo: this.quoteNo,
        quoteTime1: this.quoteTime1,
        quoteTime2: this.quoteTime2
      };
      api.page(this.listParams).then(res => {
        this.tableData = res.data.rows;
        this.pageData.total = res.data.total;
        this.isLoading = false;
      });
    },

    // 获取客户列表
    getClientList() {
      api.getClientList().then(res => {
        this.clientList = res.data;
      });
    },

    // 导出Excel
    exportExcel(quoteId) {
        window.location.href =  process.env.BASE_API + "/api/pds/pdsFileExcel/exportQuoteExcel?id=" + quoteId;
        this.ipVisible = false;
    },

    // 搜索
    search() {
      if (this.timeArr === null) {
        this.quoteTime1 = this.quoteTime2 = "";
      } else {
        this.quoteTime1 = this.timeArr[0];
        this.quoteTime2 = this.timeArr[1];
      }
      this.pageData.page = 1;
      this.getList();
    }
  }
};
</script>
